@import './mixin.scss';
$size_small:rem(12);
$size_middle:rem(22);
$size_default:rem(24);
$size_big:rem(26);
$size_30:rem(30);
$text_color: #787878; //文字灰色
$text_3: #333; //文字深灰色
$text_6: #666; //文字深灰色
$text_b6: #b6b6b6; //文字浅灰色
$text_b7: #777; //文字浅灰色
$sel_color:#c59c5a; //logo色
$text_red:#ff4d4d; //红色
$text_green:#24d861; //绿色
$text_red_opacity:rgba(255, 77, 77, .08); //红色
$text_green_opacity:rgba(36, 216, 97, .08); //绿色
$line_color:#f0f0f0; //线条颜色
$btn_color:#404040;
$text_yellow:#faa302;
$bg_color: #f0f0f0; //页面背景颜色
$bg_color_gray:#1d1d1f;
$border_color: #2f2e34;
body,
div,
span,
header,
footer,
nav,
section,
aside,
article,
ul,
dl,
dt,
dd,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
i,
b,
em,
textarea,
button,
input,
select,
figure,
figcaption {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    border: none;
    font-weight: normal;
    font-family: 'pingfang', PingFangSC-Light, helvetica, 'Heiti SC';
    box-sizing: border-box;
    font-size: $size_default;
    font-style: normal;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    &:hover {
        outline: none;
    }
}
.pf_thick {
   font-weight: bold;
}


a,
a:visited {
    text-decoration: none;
    color: #333;
}

input:focus {
    outline: none;
    border: none;
    border-radius: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    background: #fff;
    color: #333;
}

// 禁止用户选中
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input {
    background: rgba(0, 0, 0, 0);
    opacity: 1;
    -webkit-appearance: none;
}
input[disabled] {
    background: $line_color;
}
textarea[disabled] {
    background: $line_color;
    -webkit-appearance: none;
    opacity: 1;
}

::-webkit-scrollbar {
    display: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix:after {
    /*最简方式*/
    content: '';
    display: block;
    clear: both;
}

.clearfix {
    /*兼容 IE*/
    zoom: 1;
}

strong {
    font-weight: 400;
}

.wapper_page {
    background: $bg_color;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.over_line {
    overflow: hidden;
    /** 超出隐藏 **/
    text-overflow: ellipsis;
    /** 当内联内容溢出块容器时，将溢出部分替换为（...） **/
    white-space: nowrap;
    /** 强制不换行 **/
}
.over_more_line{
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
}

[v-cloak] {
  display: none;
}

/*设置红绿色*/

.red {
    color: $text_red;
}

.green {
    color: $text_green;
}

.bg_red {
    color: $text_red;
    background: $text_red_opacity;
}

.bg_green {
    color: $text_green;
    background: $text_green_opacity;
}
.bg_gray{
    color: #aaa;
    background: rgba(240,240,240,.8);
}

//btn
.btn {
    color: $btn_color;
    border: 1px solid $btn_color;
    border-radius: rem(10);
    background: rgba(0, 0, 0, 0);
    font-size: $size_middle;
    line-height: rem(54);
    padding: 0 rem(30);
    outline: none;
}

.btn_go {
    background: $sel_color;
    color: white;
    border: 1px solid $sel_color;
}

.btn_border {
    color: $sel_color;
    border: 1px solid $sel_color;
}

.btn[disabled] {
    background: #ebebeb;
    border: 1px solid #EBEBEB;
    color: white;
}

.btn_no {
    background: rgba(0, 0, 0, 0);
    border: 0;
    outline: none;
}

.btns_buy_sell {
    padding: rem(30);
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    button {
        color: white;
        line-height: rem(80);
        height: rem(80);
        width: 50%;
        border-radius: rem(10);
        display: flex;
        justify-content: space-between;
        padding: 0 rem(60) 0 rem(20);
        box-shadow: 0 2px 5px 0px rgba(0, 0, 0, .1);
    }
    button:nth-last-of-type(1) {
        padding: 0 rem(20) 0 rem(60);
    }
    span,
    em {
        font-size: rem(30);
    }
    i {
        display: block;
        background: white;
        width: rem(30);
        height: rem(110);
        display: inline-block;
        left: 50%;
        margin-left: rem(-15);
        margin-top: rem(-10);
        position: absolute;
        transform: rotate(15deg);
    }
    b {
        position: absolute;
        padding: 0 rem(20);
        line-height: rem(30);
        font-size: $size_default;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: white;
        border-radius: rem(15);
        box-shadow: 0 2px 5px 0px rgba(0, 0, 0, .1);
        display: block;
        padding-top: rem(2);
    }
}

//x-header
.wapper_header {
    .vux-header {
        height: rem(88);
        background: white;
        position: sticky;
        z-index: 399;
        top: 0;
    }
    .vux-header .vux-header-title {
        color: $text_3;
        font-size: rem(30);
        font-weight: bold;
//      font-family: 'pingfang-thick';
    }
    .vux-header .vux-header-left .left-arrow:before {
        border-color: $text_3;
        width: rem(20);
        height: rem(20);
    }
    .vux-header .vux-header-left,
    .vux-header .vux-header-right {
        top: rem(25);
    }
    .vux-header .vux-header-left a,
    .vux-header .vux-header-left button,
    .vux-header .vux-header-right a,
    .vux-header .vux-header-right button {
        color: $sel_color;
        font-size: rem(30);
    }
    .vux-header .vux-header-left .back {
        margin-top: rem(-5);
        margin-left: rem(-10);
    }
}
.wapper_invite .vux-header .vux-header-left{
    top: rem(15);
}

.wapper_details .vux-header .vux-header-title {
    color: white;
}

.header_line .vux-header {
    border-bottom: 1px solid #f0f0f0;
}

.hrader_transaction .vux-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.wapper_header.details .vux-header .vux-header-title {
    color: white;
}

.wapper_header.task .vux-header .vux-header-right {
    right: 0;
}
.header_right0.wapper_header .vux-header .vux-header-right{
    right: 0;
    top: rem(20);
}

//switch
.switch_string {
    display: flex;
    justify-content: space-between;
    line-height: rem(56);
    em {
        color: $text_6;
        font-size: rem(28);
    }
    .swiching {
        background: $sel_color;
        line-height: rem(56);
        border-radius: rem(28);
        color: white;
        padding: 0 rem(5);
        position: relative;
        width: rem(160);
        i {
            display: inline-block;
            width: rem(42);
            height: rem(42);
            border-radius: 50%;
            background: white;
            position: absolute;
            top: rem(7);
            left: rem(7);
            animation: swich_left .3s ease-in-out forwards;
        }
        .swich_circle {
            animation: swich_right .3s ease-in-out forwards;
        }
        span {
            font-size: rem(28);
            padding: 0 rem(20);
        }
        .swich_type1 {
            padding-right: rem(60);
        }
        .swich_type2 {
            padding-left: rem(60);
        }
    }
}

@keyframes swich_right {
    from {
        left: rem(7);
    }
    to {
        left: rem(110);
    }
}

@keyframes swich_left {
    from {
        left: rem(110);
    }
    to {
        left: rem(7);
    }
}
//不能滑动
.switch_string.switch_boolean {
    .swiching {
        width: rem(104);
        height: rem(46);
        background: $sel_color;
        i {
            display: inline-block;
            width: rem(38);
            height: rem(38);
            top: rem(4);
            left: rem(4);
            box-shadow: 0 0 rem(10) 0 rgba(0, 0, 0, .3);
            animation: swich_left1 .3s ease-in-out forwards;
        }
    }
    .swiching_no {
        background: #eeeeee;
    }
    .swich_circle {
        animation: swich_right1 .3s ease-in-out forwards;
    }
}

@keyframes swich_right1 {
    from {
        left: rem(4);
    }
    to {
        left: rem(60);
    }
}

@keyframes swich_left1 {
    from {
        left: rem(60);
    }
    to {
        left: rem(4);
    }
}
//中的
.switch_string.switch_middle {
    .swiching {
        width: rem(104);
        height: rem(46);
        background: $sel_color;
    }
    i {
        display: inline-block;
        width: rem(38);
        height: rem(38);
        top: rem(4);
        left: rem(4);
        box-shadow: 0 0 rem(10) 0 rgba(0, 0, 0, .3);
        animation: swich_right1 .3s ease-in-out forwards;
    }
    .swich_circle {
        animation: swich_left1 .3s ease-in-out forwards;
    }
}

//小的
.switch_string.switch_small {
    .swiching {
        width: rem(86);
    }
    i {
        animation: swich_left2 .3s ease-in-out forwards;
    }
    .swich_circle {
        animation: swich_right2 .3s ease-in-out forwards;
    }
}
@keyframes swich_right2 {
    from {
        left: rem(4);
    }
    to {
        left: rem(42);
    }
}
@keyframes swich_left2 {
    from {
        left: rem(42);
    }
    to {
        left: rem(4);
    }
}

.radio_group {
    text-align: left;
    label {
        line-height: rem(56);
        display: inline-block;
        padding-left: rem(10);
        color: #777;
        vertical-align: rem(-4);
    }
    .radio_type {
        width: rem(50);
        height: rem(50);
        appearance: none;
        position: relative;
        vertical-align: middle;
    }
    .radio_type:before {
        content: '';
        width: rem(40);
        height: rem(40);
        border: 1px solid #7d7d7d;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
    }
    .radio_type:checked:before {
        content: '';
        width: rem(40);
        height: rem(40);
        border: 1px solid $sel_color;
        background: $sel_color;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
    }
    .radio_type:checked:after {
        content: '';
        width: rem(20);
        height: rem(10);
        border: 2px solid white;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: rem(12);
        left: rem(10);
        vertical-align: middle;
        transform: rotate(-45deg);
        vertical-align: middle;
    }
    .radio_type:checked+label {
        color: $sel_color;
    }
}


/*popup*/

.vux-popup-dialog {
    background: white;
    .title {
        height: rem(80);
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid $line_color;
        .btn {
            color: $sel_color;
            line-height: rem(80);
            font-size: rem(30);
        }
        span {
            font-size: rem(30);
            text-align: center;
            flex-grow: 1;
            color: $text_3;
            line-height: rem(80);
        }
    }
}


/*手风琴*/
.rewards .van-cell {
    padding: rem(16) 0;
    border: 0;
    position: initial;
}

.rewards .van-cell__title {
    height: rem(40);
}

.rewards .van-collapse-item__wrapper .van-collapse-item__content {
    padding: 0;
}

.rewards .van-cell__left-icon,
.rewards .van-cell__right-icon {
    line-height: rem(40);
    height: rem(40);
}

.agent_rewards .van-cell {
    padding: rem(25) 0;
}


//加载样式
.vux-loadmore {
    width: 50%;
    height: rem(180);
    vertical-align: top;
    margin: rem(20) auto 0;
}
.weui-loadmore_line {
    height: rem(150);
    margin: rem(50) auto 0;
}
//加载样式---无导航
.no_footBar .vux-loadmore {
    width: 50%;
    height: rem(80);
    vertical-align: top;
    margin: rem(20) auto 0;
}
.no_footBar .weui-loadmore_line {
    height: rem(50);
    margin: rem(50) auto 0;
}

//ios下滑线圆角去除
.input_radius {
    border-radius: 0;
    border-bottom: 1px solid #cccccc;
}

//调整message行高
.message {
    p {
        input {
            line-height: rem(50);
            height: rem(40);
            top: rem(35)!important;
            // height: 60%!important;
        }
    }
}


.weui-toast_text .weui-toast__content{
    padding: rem(20);
}


.badge{
    background: #ff6562;
    color: white;
    padding: rem(3) rem(8) 0;
    line-height: rem(27);
    min-width: rem(30);
    border-radius: rem(15) rem(15) rem(15) rem(4);
    position: absolute;
    top: rem(5);
    font-size: rem(24);
    transform: scale(.8);
    
}


.mt-range{
    margin-left: rem(100);
    margin-right: rem(10);
    .mt-range-progress{
        background-color: #c59c5a;
        top: 40%;
    }
    .mt-range-runway{
        background-color: #f0f0f0;
        border-top-color:#f0f0f0;
        top: 40%;
        right: rem(-46);
    }
    .mt-range-thumb{
        width: rem(46);
        height: rem(46);
    }
    .range_start,.range_end{
        color: #ccc;
        margin-top: rem(40);
        position: absolute;
        left: 0;
    }
    .range_end{
        left: auto;
        right: rem(10);
    }
}

//产品详情
.operation2 .swiper-pagination{
    width: 100vw;
    height: rem(20);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: rem(0);
    padding: 0;
    margin: 0;
    .swiper-pagination-bullet {
        display: inline-block;
        width: rem(10);
        height: rem(10);
        background: #cccccc;
        border-radius: 50%;
        margin: rem(5);
    }
    .swiper-pagination-bullet-active{
        width: rem(14);
        height: rem(14);
        background: #19ba4f;
    }
}